   //1、找到container下的所有img标签,li标签,左右按钮
   var aImgs = document.querySelectorAll('.container img');
   var aLis = document.querySelectorAll('.container li');
   var btnLeft = document.querySelector('.container .left');
   var btnRight = document.querySelector('.container .right');
   //点击事件
   //点击按钮图片切换
   var index = 0;        //当前图片下标
   var lastIndex = 0;
   btnRight.onclick = function(){
       //记录上一张图片的下标
       lastIndex = index;
       //清除上一张图片的样式
       aImgs[lastIndex].className = '';
       aLis[lastIndex].className = '';
       index++;
       index %= aImgs.length;    //实现周期性变化
       //设置当前图片的样式
       aImgs[index].className = 'on';
       aLis[index].className = 'active';
   }
   //左边按钮类似
   btnLeft.onclick = function(){
       //记录上一张图片的下标
       lastIndex = index;
       //清除上一张图片的样式
       aImgs[lastIndex].className = '';
       aLis[lastIndex].className = '';
       index--;
       if (index < 0) {
           index = aImgs.length - 1;
       }
       //设置当前图片的样式
       aImgs[index].className = 'on';
       aLis[index].className = 'active';
   }